import React, { useEffect, useState } from 'react'
import styles from './index.module.scss'
import Tabs from '../../components/Tabs/index'
import { useDispatch, useSelector } from 'react-redux'
import { getUserChannels } from '../../store/reducer/home'
import ArticleList from './components/ArticleList'
export default function Home() {
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getUserChannels())
  }, [dispatch])

  const tabs = useSelector((state) => state.home.channels)
  const [active, setActive] = useState(0)
  return (
    <div className={styles.root}>
      <Tabs
        tabs={tabs}
        index={active}
        onChange={(e) => {
          setActive(e)
        }}
      >
        {tabs.map((item) => (
          <ArticleList
            key={item.id}
            channelId={item.id}
            activeId={tabs[active].id}
          ></ArticleList>
        ))}
      </Tabs>
    </div>
  )
}
